<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
		<link
		    rel="stylesheet"
		    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
		  />
		<script src="./js/jquery-3.7.1.js"></script>
		<!-- 引入 layui.css -->
		<link href="//unpkg.com/layui@2.9.21-rc/dist/css/layui.css" rel="stylesheet">
		<!-- 引入 layui.js -->
		<script src="//unpkg.com/layui@2.9.21-rc/dist/layui.js"></script>

		<style>
			body{
				background-image: url('img/晴川万里 蓝天 白云 鲜花 4k风景壁纸3840x2160_彼岸图网.jpg');
				background-size: 100%;
			}

			.main{
				position: absolute;
				top: 50%;
				height: 400px;
				background-color: rgba(204, 204, 204, .8);
				margin-top: -200px;
				border-radius: 15px;
				box-shadow: 2px 2px 5px #333;
			}
			.main .title{
				padding: 25px;
			}
			.footer{
				text-align: center;
			}
			button{
				outline: none !important;
				letter-spacing: 10px;
			}
		</style>
	</head>
	<body>
		<div class="main animate__animated animate__wobble col-md-4 col-sm-4 col-md-offset-4 col-sm-offset-4">
			<div class="title col-md-offset-1">
				<h2>学生宿舍管理系统 <small>管理员登录</small></h2>
			</div>
			<hr>
			
			<form class="form-horizontal col-md-10 col-md-offset-1">
			  <div class="form-group">
			    <div class="input-group form-group-lg">
			      <div class="input-group-addon">
					  <span class="glyphicon glyphicon-user"></span>
				  </div>
			      <input type="text" class="form-control" id="username" placeholder="输入账号">
			    </div>
			  </div>
			  <div class="form-group">
			    <div class="input-group form-group-lg">
			      <div class="input-group-addon">
					  <span class="glyphicon glyphicon-piggy-bank"></span>
				  </div>
			      <input type="text" class="form-control" id="password" placeholder="输入密码">
			    </div>
			  </div>
			  <div class="form-group">
			    <label class="radio-inline">
			      <input type="radio" name="type" value="systemAdmin"> 系统管理员
			    </label>
			    <label class="radio-inline">
			      <input type="radio" name="type" value="dormitoryAdmin"> 宿舍管理员
			    </label>
			  </div>
			  <div class="form-group">
			    <button type="button" id="btn" class="btn btn-success btn-lg col-md-12">登录</button>
			  </div>
			  <hr>
			  <div class="form-group footer">
			    <p>&copy; 高耳机High-Earphone</p>
			  </div>
			</form>
			
		</div>

	<script>
		$('#btn').click(function (){
			// 获取信息
			var username = $('#username').val().trim();
			var password = $('#password').val().trim();
			var role = $('input[name="type"]:checked').val();
			// console.log(role != 0);
			if (role == 'systemAdmin') {
				//系统管理员
				role = '0';
			}else if (role == 'dormitoryAdmin'){
				// 宿舍管理员
				role = '1';
			}else {
				role = '666'
			}
			// 标记
			var ok = true;
			if (username == '') {
				ok = false;
				layer.msg('用户名不能为空');
			}else if (password == '') {
				ok = false;
				layer.msg('密码不能为空');
			}else if (password.length < 3) {
				ok = false;
				layer.msg('输入格式有误,重新输入')
			}else if (role != '0' && role != '1') {
				ok = false;
				layer.msg('未选择登录身份')
			}

			// 判断能否提交请求
			if (ok) {
				//发送Ajax请求
				$.ajax({
					url:'admin',
					type:'post',
					data:{
						'username':username,
						'password':password,
						'dr':role,
						'method':'login'
					},
					success:function (result) {
						// console.log(result.username);
						if (result.code == 200) {
							if (role == 0) {
								//系统管理员
								window.sessionStorage.setItem('admin_data', result.data.name);
								window.location.href='系统管理员/home.html';
							}else if (role == 1) {
								//宿舍管理员
								window.sessionStorage.setItem('admin_data', result.data.name);
								layer.msg('欢迎登陆')
							}
						}else {
							layer.msg('账号或密码错误');
						}
						// alert('请求成功');
					},
					error:function () {
						layer.msg('网络异常');
					}
				})
			}

		})
	</script>

	</body>
</html>
